<template>
  <view class="address-choose-wrap">
    <view class="address-choose">
      <view class="header">
        <view class="select-wrap">
          <view @click="zcctSelect('countries')" :class="data.active == 'countries' ? 'active' : ''">
            {{ data.countries.name || $t('account.address.info.in_select') }}
          </view>
          <view @click="zcctSelect('zones')" :class="data.active == 'zones' ? 'active' : ''" v-if="data.zones.items.length">
            {{ data.zones.name || $t('account.address.info.in_select') }}
          </view>

          <view @click="zcctSelect('cities')" :class="data.active == 'cities' ? 'active' : ''" v-if="data.zones.name">
            {{ data.cities.name || $t('account.address.info.input_city') }}
          </view>
        </view>
      </view>
      <view class="address-list-wrap">
        <view class="scroll-Y" v-show="data.active != 'cities'">
          <view
            :class="['address-item', activeAddressItem(item) ? 'active' : '']"
            @click="checkedAddress(item)"
            v-for="(item, i) in currentAddress"
            :key="i"
          >
            <uni-icons
              :type="activeAddressItem(item) ? 'checkbox-filled' : 'circle'"
              :color="activeAddressItem(item) ? '#222' : '#ccc'"
              size="20"
            ></uni-icons>
            <view class="name">{{ item.name }}</view>
          </view>
        </view>
        <view v-show="data.active == 'cities'">
          <view class="city-input">
            <uni-easyinput v-model="data.cities.name" placeholder="请输入内容"></uni-easyinput>
            <view class="btn btn-primary inline" @click="confirmAddress">{{ $t('common.confirm') }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const { proxy } = getCurrentInstance()

const paging = ref(null)
const props = defineProps({
  address: {
    type: Object,
    default: () => {},
  },
})

const data = reactive({
  form: {
    country_id: '', // 国家ID
    country: '', // 国家名称
    zone_id: '', // 省份ID
    zone: '', // 省份名称
    city: '', // 城市名称
  },

  countries: { // 国家
    name: '',
    items: [],
  },

  zones: { // 省份
    name: '',
    items: [],
  },

  cities: { // 城市
    name: '',
    items: []
  },

  active: 'countries',
})

onMounted(() => {
  getCountries()
})

const currentAddress = computed(() => {
  return data[data.active].items
})

const activeIdKey = computed(() => {
  switch (data.active) {
    case 'countries':
      return 'country_id'
    case 'zones':
      return 'zone_id'
    case 'cities':
      return 'city_id'
  }
})

const showPopup = data => {
  proxy.$refs.popup.open()
}

const close = () => {
  proxy.$refs.popup.close()
}

const getCountries = async () => {
  return proxy.$http.get('countries').then(res => {
    data.countries.items = res
  })
}

const queryList = async () => {
  return proxy.$http.get('countries').then(res => {
    paging.value.complete(res);
  })
}

const getZones = async (id) => {
  return proxy.$http.get(`countries/${id}/zones`).then(res => {
    data.zones.items = res
  })
}

const checkedAddress = item => {
  data[data.active].name = item.name
  data.form[activeIdKey.value] = item.id
  data.form[activeIdKey.value.replace('_id', '')] = item.name

  switch (data.active) {
    case 'countries':
      data.zones = { name: '', items: [] }
      getZones(item.id).then(res => {
        data.active = 'zones'
      })
      break
    case 'zones':
      data.active = 'cities'
      // close()
      // proxy.$emit('change', data.form)
      break
  }
}

const confirmAddress = () => {
  data.form.city = data.cities.name
  close()
  proxy.$emit('change', data.form)
}

const zcctSelect = type => {
  data.active = type
}

const activeAddressItem = item => {
  return item.id == data.form[activeIdKey.value]
}

const setAddress = item => {
  for (let key in item) {
    if (typeof data.form[key] !== 'undefined') {
      data.form[key] = item[key]
      if (item.city) {
        data.cities.name = item.city
        data.form.city = item.city
      }

      if (typeof data[idToItemsKey(key)] !== 'undefined') {
        data[idToItemsKey(key)].name = item[key.replace('_id', '')]
      }
    }
  }

  data.active = 'cities'

  if (data.form.country_id) {
    getZones(data.form.country_id)
  }
}

const idToItemsKey = id => {
  switch (id) {
    case 'country_id':
      return 'countries'
    case 'zone_id':
      return 'zones'
    case 'city_id':
      return 'cities'
  }
}

const popupChange = e => {
  if (!e.show && data.zones.name == '') {
    setAddress(data.address)
  }
}

defineExpose({ setAddress, showPopup })
</script>

<style lang="scss" scoped>
.address-choose {
  width: 100%;
  // height: 80vh;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  // padding: 20px 0;
  box-sizing: border-box;
  position: relative;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));

  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #999;
  }

  .header {
    padding: 0 14px;
    border-top: 1px solid #ddd;
    position: fixed;
    top: 44px;
    background: #fff;
    padding-top: calc(10px + env(safe-area-inset-bottom));
    width: 100%;
    // margin-bottom: 4px;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 16px;
      text-align: center;
    }

    .select-wrap {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #333;

      view {
        margin-right: 13px;
        position: relative;
        // 不换行 超出省略号
        white-space: nowrap;
        overflow: hidden;
        padding-bottom: 20px;
        text-overflow: ellipsis;

        &.active {
          color: $primary;
          font-weight: bold;

          &::after {
            content: '';
            display: block;
            width: 100%;
            height: 2px;
            background-color: $primary;
            position: absolute;
            bottom: 15px;
            left: 0;
          }
        }
      }
    }
  }

  .address-list-wrap {
    height: 100%;
    padding-top: 44px;

    .scroll-Y {
      // height: 100%;
      height: 500px;
      // height: calc(100% - 120rpx);
      // padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .city-input {
      padding: 0 14px;
      margin-top: 20px;

      .btn {
        margin-top: 20px;
      }
    }

    .address-item {
      display: flex;
      align-items: center;
      // height: 50px;
      padding: 7px 0;
      margin: 0 14px;
      font-size: 28rpx;
      color: #333;
      border-bottom: 1px solid #f3f3f3;
      &:active {
        background-color: #eee;
      }

      &.active {
        color: $primary;
      }

      .name {
        margin-left: 6px;
      }
    }
  }
}
</style>
